<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../static/js/utils.js"></script>
    <!-- 引入vue -->
    <script src="../../static/js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-image: url("../../static/img/背景图片.webp");
            background-size: 100vw 100vh;
        }

        .el-input {
            width: 250px;
        }

        #login {
            width: 350px;
            margin-top: 180px;
            margin-left: 140px;
            text-align: center;
            padding-top: 20px;
            padding-bottom: 20px;
            background-color: white;
            border-radius: 10px;
        }

        p {
            padding-top: 10px;
        }

        .el-button {
            width: 250px;
        }

    </style>
</head>
<body>
<div id="app">
    <div id="login">
        <h2>系统登录</h2>
        <el-form ref="loginForm" :rules="rules" :model="Logintable" label-width="80px">
            <el-form-item label="账号" prop="loginName">
                <el-input v-model="Logintable.loginName" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="Logintable.password" placeholder="请输入密码"></el-input>
            </el-form-item>
        </el-form>
        <p>
            <el-button type="primary" :loading="loading" :disabled="disabledLoginBut" @click="login">{{loginBtn}}
            </el-button>
        </p>
        <!--        <p>-->
        <!--            <el-button @click="clearInput">重置</el-button>-->
        <!--        </p>-->
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            Logintable: {
                loginName: "Yan Lan",
                password: "8HjC1V2D5q"
            },
            loginBtn: "登录",
            loading: false,
            rules: {
                loginName: [{required: true, message: '用户名不能为空请输入', trigger: 'blur'}],
                password: [{required: true, message: '密码不能为空请输入', trigger: 'blur'}]
            },
            loginNum: 0,
            disabledLoginBut: false
        }, methods: {
            login() {
                let _this = this;
                this.$refs["loginForm"].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: 'http://localhost:8080/carSales/logintable/login',
                            type: 'post',
                            async: true,
                            data: _this.Logintable,
                            dataType: 'json',
                            beforeSend: function (be) {
                                console.log("正在请求");
                                _this.loading = true;
                                _this.loginBtn = "登录中";
                            },
                            success: function (jsonData) {
                                if (jsonData.code == 200) {
                                    _this.loginBtn = "登录";
                                    _this.loading = false;
                                    _this.$message({
                                        type: "success",
                                        message: jsonData.msg
                                    });
                                    let loginData = jsonData.data.loginData;
                                    localStorage.setItem("id", loginData.id);
                                    localStorage.setItem("token", jsonData.data.token);
                                    localStorage.setItem("username", loginData.loginName);
                                    localStorage.setItem("duty", loginData.duty);
                                    location.href = "../index/index.html";
                                } else {
                                    _this.loginBtn = "重新登录";
                                    _this.loading = false;
                                    _this.loginNum += 1;
                                    let item;
                                    if (_this.loginNum == 3) {
                                        _this.disabledLoginBut = true;
                                        item = setInterval(function () {
                                            _this.loginNum -= 1;
                                            if (_this.loginNum == 0) {
                                                _this.disabledLoginBut = false
                                                clearInterval(item);
                                            }
                                        },1000*60)
                                    }
                                    _this.$message({
                                        type: "error",
                                        message: jsonData.msg
                                    });
                                }
                            }, error: function (error) {
                                console.log(error);
                            }
                        })
                    }
                })
            }
        },
        mounted() {

        }
    })
</script>
</body>
</html>